<template>
    <!-- 使用 ref 属性获取外层盒子的 DOM 元素 -->
    <div class="chartContainer-container" ref="chartContainer"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    mounted() {
        // 初始化echarts实例
        this.chartContainer = echarts.init(this.$refs.chartContainer);
        // 绘制饼图
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 获取数据，格式为[{name: '故障1', value: 50}, {name: '故障2', value: 30}]
            const data = this.getData();
            // 配置项
            const option = {
                title: {
                    text: "一级故障原因",
                    x: "center",
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },
                series: [
                    {
                        name: "一级故障原因",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "30",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: data,
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            this.chartContainer.setOption(option);
            // 监听饼图的点击事件
            this.chartContainer.on("click", (params) => {
                // 获取点击的故障信息名称
                const name = params.name;
                // 根据点击的故障信息名称获取二级故障数据
                const subData = this.getSubData(name);
                // 绘制二级故障饼图
                this.drawSubChart(subData);
            });
        },
        getSubData(name) {
            // 根据点击的故障信息名称获取对应的二级故障数据，格式为[{name: '二级故障1', value: 20}, {name: '二级故障2', value: 10}]
            const data = this.getData(name);
            return data;
        },
        drawSubChart(data) {
            // 配置项
            const option = {
                title: {
                    text: "二级故障原因",
                    x: "center",
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },
                series: [
                    {
                        name: "二级故障原因",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "30",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: data,
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            this.subChart.setOption(option);
        },
    },
};
</script>

<style scoped>
.chartContainer-container {
    width: 100%;
    /* // 设置宽度为 100% */
    height: 400px;
    border: 1px solid;
}
</style>
